// rncs
import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  View,
  ScrollView,
  Dimensions,
  FlatList,
  Image,
} from 'react-native';

import AHWebView from 'react-native-autoheight-webview';

const {width, height} = Dimensions.get('screen');

const rpx = x => (width / 750) * x;

export default class Detail extends Component {
  state = {details: null};

  componentDidMount() {
    const lid = this.props.route.params.lid;

    const url = 'http://101.96.128.94:9999/data/product/details.php?lid=' + lid;

    fetch(url)
      .then(res => res.json())
      .then(res => {
        console.log(res);

        this.setState({details: res.details});

        // 把定时器保存成属性, 这样可以在 销毁方法中读取此定时器
        // JS中: 不存在的变量 首次使用时, 会自动声明
        this.timer = setInterval(() => {
          // 操作组件的方法: 给组件绑定一个变量
          if (this.current == res.details.picList.length - 1) {
            this.current = 0;
          } else {
            this.current++;
          }
          this.fl.current.scrollToIndex({index: this.current});
        }, 2500);
      });
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  current = 0; //当前滚动
  fl = React.createRef(); //专门与组件进行绑定的变量

  render() {
    if (!this.state.details) return <View />;

    const details = this.state.details;
    return (
      <ScrollView>
        <View style={{padding: 10, backgroundColor: 'white'}}>
          <Text style={{fontSize: rpx(30), borderBottomWidth: 1}}>
            产品型号: {details.lname}
          </Text>

          <FlatList
            ref={this.fl}
            data={details.picList}
            keyExtractor={(item, index) => index + ''}
            renderItem={this._renderItem}
            horizontal
            pagingEnabled
            onScroll={this._onScroll}
          />

          <Text style={{fontSize: rpx(34)}}>{details.title}</Text>
          <Text
            style={{
              fontSize: rpx(29),
              color: 'gray',
              paddingVertical: 10,
              borderBottomWidth: 1,
              borderBottomColor: 'gray',
            }}>
            {details.subtitle}
          </Text>
          {/* 返回值的 html代码中, 缺少图片前缀域名, 利用 transHTML 方法进行补充 */}
          <AHWebView source={{html: this.transHTML(details.details)}} />
        </View>
      </ScrollView>
    );
  }

  // 给html中的内容 添加缺失的域名:
  transHTML(html) {
    // src="img  -> src="http://101.96.128.94:9999/img
    html = html.replace(
      /src="img/g,
      'width="100%" src="http://101.96.128.94:9999/img',
    );
    // src="//  -> src="https://
    return html.replace(/src="\/\//g, 'width="100%" src="https://');
    //小米电脑 没图. 是服务器问题
  }

  _onScroll = event => {
    // event.persist();
    // console.log(event);

    const offset_x = event.nativeEvent.contentOffset.x;
    const w = event.nativeEvent.layoutMeasurement.width;

    this.current = Math.round(offset_x / w);
  };

  _renderItem = ({item}) => (
    <Image
      source={{uri: 'http://101.96.128.94:9999/' + item.md}}
      style={{width: width - 20, height: width - 20}}
    />
  );
}

const styles = StyleSheet.create({});

/**
 * "<div class="content_tpl"> <div class="formwork">   <div class="formwork_img"><br></div><div class="formwork_img">    <img alt="" class="" src="img/product/detail/57b15612N81dc489d.jpg">   </div>  </div>  <div class="formwork">   <div class="formwork_img">    <img alt="" class="" src="//img20.360buyimg.com/vc/jfs/t2683/60/4222930118/169462/233c7678/57b15616N1e285f09.jpg">   </div>  </div>  <div class="formwork">   <div class="formwork_text">    技术规格请前往 www.apple.com/cn/macbook-air/specs.html 查看完整内容。</div></div></div>"
 */
